import { Form, Input, Button, Upload, message,Select   } from "antd";
import React, { Component, ReactNode } from "react";
import { Editor } from "react-draft-wysiwyg";
const { Option } = Select;
import { convertToRaw, EditorState, ContentState } from "draft-js";
import draftToHtml from "draftjs-to-html";
import htmlToDraft from "html-to-draftjs";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import { UploadOutlined } from "@ant-design/icons";
import { instance } from '../../utils/request';
import { url } from "inspector";
import '../../assets/style/common.scss'
interface EditGoodFormProps {
  data: any;
  visible?: boolean;
  close?: () => void;
  closeModal: () => void; // 将closeModal方法作为props传递给子组件
}

class EditGoodForm extends Component<EditGoodFormProps> {
  state = {
    // 富文本存储的值
    editorText: "",
    // 编辑的父文本值
    editorState: EditorState.createEmpty(), // 初始化为一个空的编辑器状态
  };
  // 执行更新操作
  onFinish = (values: any) => {
    console.log(values);
    let params = {
      goods_name: values.goods_name,
      goods_price: values.goods_price,
      goods_number: values.goods_number,
      goods_weight: values.goods_weight,
      goods_cat: "1,2,3",
      // 富文本信息
      goods_introduce: this.state.editorText,
      //图片后续处理 1. 不等于underfined 表示已经上传了
      goods_small_logo:
        values.goods_small_logo[0].response !== undefined
          ? values.goods_small_logo[0].response.data.data.url
          : values.goods_small_logo[0].name,
    };
    instance
      .put(`/goods/${this.props.data.goods_id}`, params)
      .then((res) => {
        message.success("修改商品成功!");
        this.props.closeModal();
      })
      .catch((error) => {
        console.log("error=", error);
      });
  };

  fromRef = React.createRef<any>();
  // 获取焦点引用
  setDomEditorRef = React.createRef<any>();

  componentDidMount(): void {
    // 重新进行渲染
    // 获取 父级组件传递过来的值
    const {
      type_name,
      type_code,
      status,
      create_by
    } = this.props.data;

  };

  handleCustomRequest = (options:any) => {
    const { file, onError, onSuccess } = options;
    const ext = file.name.split('.')[1];
    if (!['jpg', 'jpeg', 'png'].includes(ext)) {
      message.error('请上传jpg、jpeg、png格式的图片');
      onError('File format not supported');
      return;
    }
    const formData = new FormData();
    formData.append('file', file);

    instance.post("/upload", formData)
      .then((response) => {
        onSuccess(response, file);
      })
      .catch((error) => {
        onError(error);
      });
  };

  onFinishFailed= ()=>{
    
  };
  normFile = (e: any) => {
    console.log("Upload event:", e);
    if (Array.isArray(e)) {
      return e;
    }
    const arr = [];
    arr.push(e.fileList[e.fileList.length - 1]);

    return e && arr;
  };

  // 富文本编辑器的内容
  onEditorStateChange = (editorState: any) => {
    // 讲富文本编辑器内容转换为字符串
    let html = draftToHtml(convertToRaw(editorState.getCurrentContent()));
    // console.log(html);

    this.setState({
      editorText: html,
      editorState: editorState,
    });
  };

  render() {
    return (
      <div>
       <Form
          initialValues={{ status: "0" }} // 设置初始值
        onFinish={this.onFinish} onFinishFailed={this.onFinishFailed}>
          <Form.Item
            label="类型名称"
            name="type_name"
            rules={[{ required: true, message: "请输入类型名称!" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="类型编码"
            name="type_code"
            rules={[{ required: true, message: "请输入类型编码!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
          label="字典状态"
          name="status"
          rules={[{ required: true, message: "请选择字典状态!" }]}
        >
          <Select placeholder="请选择字典状态" defaultValue="0">
            <Option value="0">正常</Option>
            <Option value="1">禁用</Option>
          </Select>
        </Form.Item>

          <Form.Item
            label="创建人"
            name="create_by"
            rules={[{ required: true, message: "请输入创建人!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item style={{float:'right',marginLeft:'10px'}}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}

export default EditGoodForm;
